<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="goConfirm" v-model="search_text"/>
				<view class="search__box__content" v-if="!search_text">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>搜索卡片</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="search_text" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ower">
			<view class="ower__left">
				<text class="ower__left__logo"></text>
				<text class="ower__left__text">已添加的卡片</text>
			</view>
			<view class="ower__right">
				<text>预览</text>
			</view>
		</view>
		<!-- 卡片区 -->
		<view class="card-kong" v-if="!add_lists.length">
			<view class="card-kong__box">
					<image class="card-kong__box__img" src="/static/icon/file_icon.png" mode=""></image>
					<text>尚未添加卡片</text>
			</view>
		</view>
		<view class="card-my" v-else>
			<view class="card-my__content" v-for="(item, index) in add_lists" :key="index">
				<view class="card-my__content__box">
					<image class="card-my__content__box__img" :src="item.logo" mode="aspectFill"></image>
					<text class="card-my__content__box__text">{{item.title}}</text>
				</view>
				<view class="card-my__content__button" @click="CardDelete(item.id)">
					<text class="card-my__content__button__text">已添加</text>
				</view>
			</view>
		</view>
		<view v-if="un_add_lists.length" class="uncard">
			<text class="uncard__logo"></text>
			<text class="uncard__text">更多卡片</text>
		</view>
		<view class="unadd" v-if="un_add_lists.length">
			<view class="unadd__content" v-for="(item, index) in un_add_lists" :key="index">
				<view class="unadd__content__box">
					<image class="unadd__content__box__img" :src="item.logo" mode="aspectFill"></image>
					<text class="unadd__content__box__text">{{item.title}}</text>
				</view>
				<view class="unadd__content__button" @click="AddCard(item.id)">
					<text class="unadd__content__button__text">+</text>
					<text class="unadd__content__button__text">添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text: '', //收索字段
				lists: [], //总列表
				add_lists: [], //已添加列表
				un_add_lists: [], //未添加列表
			}
		},
		onLoad() {
			let self = this
			self.init()
			uni.$on('card_manage',function() {
				self.init()
			})
		},
		methods: {
			init() {
				//卡片列表
				let self = this
				self.$api.fAppCardGetList().then((res) => {
					self.lists = res.data.result
					self.un_add_lists = self.lists.filter(res => !res.add)
				})
				//我的卡片
				self.$api.fAppCardGetMyList().then((res) => {
					self.add_lists = res.data.result
				})
			},
			goConfirm() {
				//卡片列表
				let self = this
				self.$api.fAppCardGetList({
					 title: self.search_text
				}).then((res) => {
					self.lists = res.data.result
					self.un_add_lists = self.lists.filter(res => !res.add)
					if(self.un_add_lists.length == 0) {
						uni.showToast({
							title:'已添加该卡片',
							icon:'none',
							duration:2000
						})
					}
				})
			},
			/**
			 * @name 重置
			 */
			reset() {
				let self = this
				self.search_text = ''
				self.$api.fAppCardGetList().then((res) => {
					self.lists = res.data.result
					self.un_add_lists = self.lists.filter(res => !res.add)
				})
			},
			/**
			 * @name 添加
			 * @param {type} id 
			 */
			AddCard(id) {
				let self = this
				self.$api.fAppCardAddCard({
					cardId:id
				}).then((res) => {
					console.log('添加成功')
					uni.$emit('card_manage')
					uni.$emit('index_card')
				})
			},
			/**
			 * @name 删除
			 * @param {type} id 
			 */
			CardDelete(id) {
				let self = this
				self.$api.fAppCardDelete({
					id:id
				}).then((res) => {
					console.log('删除成功')
					uni.$emit('card_manage')
					uni.$emit('index_card')
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
			width: 100%;
	}
		
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	
	.ower {
		width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 8rpx 0;
		&__left {
			width: 280rpx;height: 100%;display: flex;align-items: center;
			&__logo {
				width: 11rpx;height: 34rpx;background-color: rgba(49,114,182,1);margin-left: 24rpx;
			}
			&__text {
				font-size: 34rpx;color: #333333;margin-left: 24rpx;
			}
		}
		&__right {
			padding-right: 29rpx;font-size: 26rpx;color: #888888;
		}
	}
	.card-kong {
		width: 100%;height: 330rpx;background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;
		&__box {
			width: 90%;height: 330rpx;background-color: #FCFCFC;display: flex;align-items: center;justify-content: space-evenly;flex-direction: column;
			&__img {
				width: 136rpx;height: 136rpx;
			}
		}
	}
	
	.card-my {
		width: 93.1%;padding: 0 24rpx;
		&__content {
			width: 100%;margin-bottom: 6rpx;border-bottom: 2rpx solid #efefef;display: flex;align-items: center;justify-content: space-evenly;
			&__box {
				width: 100%;margin: 24rpx 0;display: flex;align-items: center;
				&__img {
					width: 70rpx;height: 70rpx;
				}
				&__text {
					font-size: 30rpx;margin-left: 45rpx;color: rgba(51,51,51,1);
				}
			}
			&__button {
				width: 138rpx;height: 60rpx;border-radius: 14rpx;border:1rpx solid rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;
				&__text {
					font-size: 28rpx;color: rgba(49,114,182,1);
				}
			}
		}
	}
	
	.uncard {
		width: 260rpx;height: 100%;display: flex;align-items: center;
		&__logo {
			width: 11rpx;height: 34rpx;background-color: rgba(49,114,182,1);margin-left: 24rpx;
		}
		&__text {
			font-size: 34rpx;color: #333333;margin-left: 24rpx;
		}
	}
	
	.unadd {
		width: 93.1%;padding: 0 24rpx;
		&__content {
			width: 100%;margin-bottom: 6rpx;border-bottom: 2rpx solid #efefef;display: flex;align-items: center;justify-content: space-evenly;
			&__box {
				width: 100%;margin: 24rpx 0;display: flex;align-items: center;
				&__img {
					width: 70rpx;height: 70rpx;
				}
				&__text {
					font-size: 30rpx;margin-left: 45rpx;
				}
			}
			&__button {
				width: 138rpx;height: 60rpx;border-radius: 14rpx;background-color: rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;
				&__text {
					font-size: 28rpx;color: #FFFFFF;
				}
			}
		}
	}
</style>
